<template>
  <div id="campus_details" class="container">
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <!-- <el-breadcrumb-item class="title" :to="{ path: '/work_platform_parent' }">工作台</el-breadcrumb-item> -->
        <el-breadcrumb-item class="title">校区详情</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- <div class="title">优惠券数据</div> -->
      <!-- 我的报表 -->
      <div class="myWorkTable" style="width:100%;height:3rem;">
        <el-row class="title_campus">
          <span style="font-size:0.2rem;">{{campusData.name}}</span>
        </el-row>
        <div class="info_left">
          <div>
            校区类型：
            <span
              style="color:#333333;padding-left:0.36rem;"
            >{{campusData.cooperationMode == 1 ? "加盟":"直营"}}</span>
          </div>
          <div style="margin-top:0.25rem;">
            校区地址：
            <span style="color:#333333;padding-left:0.36rem;">{{campusData.address}}</span>
          </div>
          <div style="margin-top:0.25rem;">
            校区负责人：
            <span style="color:#333333;padding-left:0.1rem;">{{campusData.contactsName}}</span>
          </div>
          <div style="margin-top:0.25rem;">
            创建人：
            <span style="color:#333333;padding-left:0.5rem;">{{campusData.createUserName}}</span>
          </div>
        </div>
        <div class="info_right">
          <div>
            合作期限：
            <span
              v-if="campusData.cooperationMode == 1"
              style="color:#333333;padding-left:0.2rem;"
            >{{campusData.serveStartTime}} 至 {{campusData.serveEndTime}}</span>
            <span v-else style="color:#333333;padding-left:0.2rem;">无限期</span>
          </div>
          <div style="margin-top:0.25rem;">
            校区电话：
            <span style="color:#333333;padding-left:0.2rem;">{{campusData.tel}}</span>
          </div>
          <div style="margin-top:0.25rem;">
            手机号码：
            <span style="color:#333333;padding-left:0.2rem;">{{campusData.contactsTel}}</span>
          </div>
          <div style="margin-top:0.25rem;">
            创建时间：
            <span style="color:#333333;padding-left:0.2rem;">{{campusData.createTime}}</span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="myWorkTable" style="margin-top: 0.2rem;width: 5.96rem;">
          <el-row class="title_campus">
            <span style="font-size:0.2rem;">数据列表</span>
          </el-row>
          <div v-if="reportData.workTableChangeType==1">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1.5rem;">序号</td>
                  <td style="width: 3rem;">收入类别</td>
                  <td style="width: 1.44rem;">收入金额</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in courseDataList[0]">
                  <td style="width: 1.5rem;">{{index+1}}</td>
                  <td style="width: 3rem;">{{getBillModeName(item.billMode)}}</td>
                  <td style="width: 1.44rem;">{{item.totalMoney == null ? 0 : item.totalMoney}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==2">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1.5rem;">序号</td>
                  <td style="width: 3rem;">课程名称</td>
                  <td style="width: 1.44rem;">消课收入</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in courseDataList[2]">
                  <td style="width: 1.5rem;">{{index+1}}</td>
                  <td style="width: 3rem;">{{item.courseName}}</td>
                  <td style="width: 1.44rem;">{{item.totalMoney == null ? 0 : item.totalMoney}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==3">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1.5rem;">序号</td>
                  <td style="width: 3rem;">课程名称</td>
                  <td style="width: 1.44rem;">学员人数</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in courseDataList[3]">
                  <td style="width: 1.5rem;">{{index+1}}</td>
                  <td style="width: 3rem;">{{item.courseName}}</td>
                  <td style="width: 1.44rem;">{{item.studentCount}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==4">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1.5rem;">序号</td>
                  <td style="width: 3rem;">跟进人</td>
                  <td style="width: 1.44rem;">人数</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in courseDataList[4]">
                  <td style="width: 1.5rem;">{{index+1}}</td>
                  <td style="width: 3rem;">{{item.executeUserName}}</td>
                  <td style="width: 1.44rem;">{{item.clueCount}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==5">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1.5rem;">序号</td>
                  <td style="width: 3rem;">跟进人</td>
                  <td style="width: 1.44rem;">人数</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in courseDataList[5]">
                  <td style="width: 1.5rem;">{{index+1}}</td>
                  <td style="width: 3rem;">{{item.executeUserName}}</td>
                  <td style="width: 1.44rem;">{{item.clueCount}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==6">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1.5rem;">序号</td>
                  <td style="width: 3rem;">跟进人</td>
                  <td style="width: 1.44rem;">人数</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in courseDataList[6]">
                  <td style="width: 1.5rem;">{{index+1}}</td>
                  <td style="width: 3rem;">{{item.executeUserName}}</td>
                  <td style="width: 1.44rem;">{{item.clueCount}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==7">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1.5rem;">序号</td>
                  <td style="width: 3rem;">退款类型</td>
                  <td style="width: 1.44rem;">退款金额</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in courseDataList[1]">
                  <td style="width: 1.5rem;">{{index+1}}</td>
                  <td style="width: 3rem;">{{getBillModeName(item.billMode)}}</td>
                  <td style="width: 1.44rem;">{{item.totalMoney == null ? 0 : item.totalMoney}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==8">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 2rem;">线索状态</td>
                  <td style="width: 1rem;">{{reportData.pre_radio}}</td>
                  <td style="width: 1rem;">{{reportData.timeType}}</td>
                  <td style="width: 1.94rem;">环比</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="(value,key2) in funnelTableData" :key="key2">
                  <td style="width: 2rem;">{{clueStatus[key2]}}</td>
                  <td style="width: 1rem;">{{funnelTableData[key2]['current']}}</td>
                  <td style="width: 1rem;">{{funnelTableData[key2]['pre']}}</td>
                  <td
                    v-if="funnelTableData[key2]['compare']>0"
                    style="color:rgb(255,50,50);width: 1.94rem;"
                  >↑{{funnelTableData[key2]['compare']}}%</td>
                  <td
                    v-else-if="funnelTableData[key2]['compare']==0"
                  >{{funnelTableData[key2]['compare']}}%</td>
                  <td
                    v-else
                    style="color:rgb(50,255,50);width: 1.94rem;"
                  >↓{{funnelTableData[key2]['compare']}}%</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==9">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1.5rem;">序号</td>
                  <td style="width: 3rem;">渠道名称</td>
                  <td style="width: 1.44rem;">人数</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in channelData">
                  <td style="width: 1.5rem;">{{index+1}}</td>
                  <td style="width: 3rem;">{{item.name}}</td>
                  <td style="width: 1.44rem;">{{item.count}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else-if="reportData.workTableChangeType==10">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 2.5rem;">时间</td>
                  <td style="width: 1rem;">线索</td>
                  <td style="width: 1rem;">次数</td>
                  <td style="width: 1.44rem;">人数</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in websiteData">
                  <td style="width: 2.5rem;">{{item.viewDate}}</td>
                  <td style="width: 1rem;">{{item.clueCount}}</td>
                  <td style="width: 1rem;">{{item.viewCount}}</td>
                  <td style="width: 1.44rem;">{{item.visitorCount}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="myWorkTable">
          <el-row class="title_campus">
            <span style="font-size:0.2rem;color: #666666;">校区报表</span>
            <el-radio-group
              class="timeselect"
              v-model="reportData.radio"
              size="mini"
              style="top:0.1rem;"
              @change="workTableChangeTime"
            >
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="近7天"></el-radio-button>
              <el-radio-button label="本月"></el-radio-button>
              <el-radio-button label="一年" :disabled="reportData.workTableChangeType==10"></el-radio-button>
              <el-radio-button
                label="自定义"
                :disabled="reportData.workTableChangeType==10"
                ref="selfBtn"
              ></el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="reportData.selfTime"
              @change="updateSelfTime"
              type="datetimerange"
              ref="selfTime"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-row>
          <div class="box-worktableMain">
            <div class="box-radioBtn">
              <div
                class="radioItem first"
                :select="reportData.workTableradio==1"
                @click="workTableChangeType(1)"
              >总预收款</div>
              <div
                class="radioItem"
                :select="reportData.workTableradio==2"
                @click="workTableChangeType(2)"
              >总消课收入</div>
              <div
                class="radioItem"
                :select="reportData.workTableradio==3"
                @click="workTableChangeType(3)"
              >总学员</div>
              <div
                class="radioItem"
                :select="reportData.workTableradio==4"
                @click="workTableChangeType(4)"
              >新增咨询</div>
              <div
                class="radioItem"
                :select="reportData.workTableradio==5"
                @click="workTableChangeType(5)"
              >新增试听</div>
              <div
                class="radioItem last"
                :select="reportData.workTableradio==6"
                @click="workTableChangeType(6)"
              >新增报名</div>
              <div
                class="radioItem first row2"
                :select="reportData.workTableradio==7"
                @click="workTableChangeType(7)"
              >总退费款</div>
              <div
                class="radioItem row2"
                :select="reportData.workTableradio==8"
                @click="workTableChangeType(8)"
              >招生漏斗</div>
              <div
                class="radioItem row2"
                :select="reportData.workTableradio==9"
                @click="workTableChangeType(9)"
              >渠道分析</div>
              <div
                class="radioItem last row2"
                :select="reportData.workTableradio==10"
                @click="workTableChangeType(10)"
              >微官网分析</div>
            </div>
            <div class="box-chartWTB">
              <div v-show="reportData.workTableradio<8" class="left">
                <div class="leftbox1">
                  <el-row class="txt1">数据分析</el-row>
                  <el-row class="txt2">
                    <span class="num">{{reportData.totalIncome}}</span>
                    <span class="unit">{{reportData.totalIncomeUnit}}</span>
                  </el-row>
                  <el-row class="txt3">{{reportData.totalIncomeTxt}}</el-row>
                </div>
                <div class="splitline"></div>
                <div class="leftbox2">
                  <el-row class="txt1" :style="{'color':reportData.increase?'#FF5252':'#96d34d'}">
                    <span
                      class="num"
                      :style="{'margin-left':(reportData.compareLastday)>99999?'-0.08rem':'0'}"
                    >
                      <span v-if="reportData.increase&&(reportData.compareLastday!=0)">+</span>
                      <span v-else-if="!reportData.increase&&(reportData.compareLastday!=0)">-</span>
                      <span
                        :style="'margin-left:'+(reportData.compareLastday==0?'0rem;':'-0.1rem;')"
                      >{{(reportData.compareLastday+'').replace('+','').replace('e','E')}}</span>
                    </span>
                    <span class="unit" style="margin-left: -0.07rem;">
                      <span>%</span>
                      <span
                        class="arrow"
                        v-if="reportData.increase&&(reportData.compareLastday!=0)"
                        style="margin-left: -0.06rem;"
                      >▲</span>
                      <span
                        class="arrow"
                        v-else-if="!reportData.increase&&(reportData.compareLastday!=0)"
                        style="margin-left: -0.06rem;"
                      >▼</span>
                    </span>

                    <!-- <span class="num" v-if="reportData.increase">+</span>
									<span class="num" v-else>-</span>
									<span class="num">{{(reportData.compareLastday+'').replace('+','').replace('e','E')}}</span>
									<span class="unit">%</span>
									<span class="unit arrow" v-if="reportData.increase">▲</span>
                    <span class="unit arrow" v-else>▼</span>-->
                  </el-row>
                  <el-row class="txt2">较{{reportData.timeType}}比较</el-row>
                </div>
              </div>
              <div
                v-show="reportData.workTableradio<8&&!reportData.chartNoData"
                class="chartbox"
                ref="workTableChart"
              ></div>
              <div
                v-show="reportData.workTableradio<8&&reportData.chartNoData"
                class="chartboxNodataLable"
                ref="workTableChartNodataLable"
              >
                <span>暂无数据</span>
              </div>
              <div v-show="reportData.workTableradio>=8" class="box-fullChart">
                <div v-show="!reportData.fullChartNoData">
                  <span class="txt">数据分析</span>
                  <div v-show="reportData.workTableradio==8" class="chart_loudou" ref="loudouChart"></div>
                  <div v-show="reportData.workTableradio==9" class="chart_qudao" ref="qudaoChart"></div>
                  <div
                    v-show="reportData.workTableradio==10"
                    class="chart_website"
                    ref="websiteChart"
                  ></div>
                </div>
                <div v-show="reportData.fullChartNoData" style="width:100%;" class="chartNodata">
                  <span>暂无数据</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 我的课表 -->
      <div
        class="classTableBox"
        v-loading="syllabusData.dataloading"
        element-loading-text="拼命加载中"
        element-loading-background="rgba(255, 255, 255, 0.5)"
      >
        <syllabusCalendar ref="syllabusCalendar" :syllabusData="syllabusData"></syllabusCalendar>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import syllabusCalendar from "./syllabus/syllabusCalendar"; //课程表
let vm;
let user;
export default {
  components: { syllabusCalendar },
  data() {
    return {
      campusId: "",
      courseDataList: [],
      funnelTableData: [], //招生漏斗数据
      channelData: [], //渠道分析
      websiteData: [], //微官网分析数据
      campusData: {},
      bill_mode: [],
      clueStatus: {
        1: "咨询",
        2: "跟进中",
        3: "已试听",
        6: "报名"
      },
      //我的报表
      reportData: {
        radio: "今日",
        pre_radio: "今日",
        workTableradio: 1,
        selfTime: [new Date(), new Date()],
        totalIncome: 0,
        totalIncomeUnit: "",
        totalIncomeTxt: "总收入",
        compareLastday: 0,
        incomeData: [],
        primaryData: null,
        timeType: "昨日",
        workTableChangeType: 1,
        chartNoData: false,
        /**漏斗图/渠道分析/微官网是否没有数据 */
        fullChartNoData: false,
        fullChart_startTime: null,
        fullChart_endTime: null,
        preStartTime: null,
        preEndTime: null
      },
      //我的课表
      syllabusData: {
        classtext: "", //班级
        teachertext: "", //教师
        classroomtext: "", //教室
        coursetext: "", //课程
        headerType: true, //工作台 true / 教务管理 false
        radio: "今日",
        currentTime: "2019-04-02", //当前显示时间
        /**数据加载等待 */
        dataloading: false,
        //教室或助教ID（用于课表过滤）add by hym 20190520
        teacherOrAssitUserId: JSON.parse(tool.getItem(lsKey.user)).userId,
        containTrialClass: 1
      }
    };
  },
  methods: {
    /**
     * 获取类别名称
     */
    getBillModeName(mode) {
      for (let i = 0; i < vm.bill_mode.length; i++) {
        if (vm.bill_mode[i].value == mode) {
          return vm.bill_mode[i].name;
        }
      }
    },
    //我的报表
    /**
     * 更新我的报表数据
     * startTime 开始时间
     * endTime 结束时间
     * type 统计类型：1-总预收款；2-总课消收入...6：新增报名
     * istype 更新类型，决定是否重新获取数据
     */
    updateMyReportDataByTimeAndType(startTime, endTime, type, istype = false) {
      let self = this;
      if (type < 8) {
        let fieldsList = [
          { name: "billMode", value: "totalMoney" },
          { name: "courseName", value: "totalMoney" },
          { name: "courseName", value: "studentCount" },
          { name: "executeUserName", value: "clueCount" },
          { name: "executeUserName", value: "studentCount" },
          { name: "executeUserName", value: "studentCount" },
          { name: "billMode", value: "totalMoney" } //总退费款
        ];
        let curFields = fieldsList[type - 1];
        if (istype) {
          let row = getRowByType(self.reportData.primaryData);
          updateByData(row, curFields);
        } else {
          api
            .getWorkTable({
              campusId: self.campusId,
              startTime: startTime,
              endTime: endTime
            })
            .then(function(d) {
              let list = d.list;
              if (list.length > 0) {
                self.reportData.primaryData = list;
              }
              let row = getRowByType(list);
              getCourseData(list);
              updateByData(row, curFields);
            });
        }
      }

      //新增漏斗图、渠道分析、微官网分析
      this.reportData.fullChartNoData = false;
      if (type === 8) {
        // debugger
        this.$nextTick(() => {
          api
            .cluestatistic({
              campusId: self.campusId,
              startTime: this.reportData.fullChart_startTime,
              endTime: this.reportData.fullChart_endTime
            })
            .then(function(d) {
              if (d.result == "操作成功") {
                let chartdata = [],
                  tabledata = {};
                //漏斗图
                let zixun = 0,
                  genjing = 0,
                  yixiang = 0,
                  baoming = 0;
                d.info.currentClueStatistic.forEach(ele => {
                  zixun += ele.count;
                  if (
                    (ele.clueStatus >= 2 && ele.clueStatus <= 6) ||
                    ele.clueStatus == 8
                  )
                    genjing += ele.count;
                  if (ele.clueStatus == 4) yixiang += ele.count;
                  if (ele.clueStatus == 6) baoming += ele.count;
                });
                let sdata = [
                  { name: "咨询", value: zixun },
                  { name: "已跟进", value: genjing },
                  { name: "已试听", value: yixiang },
                  { name: "已报名", value: baoming }
                ];
                // if(self.funnelchart)
                self.loadLoudouChart(sdata);
              }
            });
        });
      } else if (type === 9) {
        this.$nextTick(() => {
          api
            .cluechannelstatistic({
              campusId: self.campusId,
              startTime: this.reportData.fullChart_startTime.replace(/-/g, "/"),
              endTime: this.reportData.fullChart_endTime.replace(/-/g, "/")
            })
            .then(function(d) {
              //渠道分析
              if (d.result == "操作成功") {
                let result = [];
                d.list.forEach(ele => {
                  result.push({
                    name: ele.name,
                    value: ele.count
                  });
                });
                //重新加载图表
                self.loadQudaoChart(result);
              }
            });
        });
      } else if (type === 10) {
        api
          .reportOfWebsite({
            campusId: self.campusId,
            startTime: this.reportData.fullChart_startTime,
            endTime: this.reportData.fullChart_endTime
          })
          .then(function(d) {
            if (d.result == "操作成功") {
              self.loaWebSiteChart(d.info.dayStatisticsOfWebsiteList);
            }
          });
      }
      function getCourseData(data) {
        vm.courseDataList = [];
        for (let i = 0; i < data.length; i++) {
          vm.courseDataList.push(data[i].statisticList);
        }
        console.log(vm.courseDataList);
      }
      function getRowByType(data) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].type == type) return data[i];
        }
      }
      function updateByData(data, curFields) {
        // console.log(data)
        let row = data;
        //万
        let sum = row.num,
          unit = row.numUnit;
        let chuyi = 1;
        if (sum.toString().length > 8) {
          sum = (sum / 10000).toFixed(1);
          unit = "万" + unit;
          chuyi = 10000;
        }
        //科学计数法
        let numCompared = Math.abs(row.numCompared);
        if (numCompared > 999999) {
          numCompared = numCompared.toExponential(2);
        }

        self.reportData.totalIncome = sum;
        self.reportData.totalIncomeUnit = unit;
        self.reportData.increase = row.increase;
        self.reportData.compareLastday = numCompared;
        self.reportData.incomeData = [];
        for (let i = 0; i < row.statisticList.length; i++) {
          let temp = row.statisticList[i];
          let name = temp[curFields.name];
          if (temp.billMode) {
            for (let j = 0; j < self.bill_mode.length; j++) {
              if (self.bill_mode[j].value == temp.billMode) {
                name = self.bill_mode[j].name;
                break;
              }
            }
          }
          let value = temp[curFields.value] / chuyi;
          self.reportData.incomeData.push({
            name: name,
            value: value || 0
          });
        }
        self.loadReportChart(); //柱状图
      }
    },

    /**创建柱状图 */
    loadReportChart() {
      var rem = window.rem;
      if (!this._reportChart) {
        this._reportChart = window.$echarts.init(this.$refs.workTableChart);
      }
      let chart = this._reportChart;
      let xdata = [],
        sdata = [];
      let data = this.reportData.incomeData;
      this.reportData.chartNoData = false;
      if (!data || data.length == 0) {
        this.reportData.chartNoData = true;
      }
      let unit = this.reportData.totalIncomeUnit;
      for (let i = 0; i < data.length; i++) {
        let row = data[i];
        let xname = row["name"] || "";
        if (xname.length > 4) {
          xname = xname.substr(0, 4) + "...";
        }
        xdata.push(xname);
        sdata.push(row["value"]);
      }
      let dataZoom = null;
      if (xdata.length > 10) {
        dataZoom = [
          {
            type: "slider",
            show: true,
            xAxisIndex: [0],
            top: 2.6 * rem,
            bottom: 0.07 * rem,
            left: 0.3 * rem,
            right: 0.3 * rem,
            startValue: 0,
            endValue: 3, //初始化滚动条
            minValueSpan: 3,
            maxValueSpan: 3,
            showDetail: false,
            showDataShadow: false,
            // backgroundColor : "red",
            fillerColor: "#9092984d",
            borderColor: "#DCDFE6",
            handleStyle: {
              opacity: 0
            }
          }
        ];
      }
      let option = {
        grid: {
          left: 0.26 * rem,
          top: 0.5 * rem,
          bottom: 0.16 * rem,
          right: 0.26 * rem,
          containLabel: true
        },
        xAxis: {
          type: "category",
          z: 11,
          data: xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#999999"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // interval:0,
            fontSize: 0.14 * rem,
            color: "#333333",
            fontWeight: "normal",
            rotate: 30,
            inside: false,
            show: true
            // formatter: function(value) {
            // 	var ret = ""; //拼接加\n返回的类目项
            // 	var maxLength = 1; //每项显示文字个数
            // 	var valLength = value.length; //X轴类目项的文字个数
            // 	var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            // 	if (rowN > 1) //如果类目项的文字大于3,
            // 	{
            // 		for (var i = 0; i < rowN; i++) {
            // 			var temp = ""; //每次截取的字符串
            // 			var start = i * maxLength; //开始截取的位置
            // 			var end = start + maxLength; //结束截取的位置
            // 			//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
            // 			temp = value.substring(start, end) + "\n";
            // 			ret += temp; //凭借最终的字符串
            // 		}
            // 		return ret;
            // 	} else {
            // 		return value;
            // 	}
            // },
          }
          // splitLine:{
          // 	show:false,
          // 	lineStyle:{
          // 		color:'#f7f7f7',
          // 		width:1
          // 	}
          // }
        },
        yAxis: {
          type: "value",
          name: "(" + unit + ")",
          nameTextStyle: {
            padding: [0, 0, 0, -0.4 * rem],
            color: "#666666",
            fontSize: 0.14 * rem
          },
          axisLabel: {
            color: "#666666",
            fontSize: 0.16 * rem,
            fontWeight: "normal"
            // formatter: function (value, index){

            // 	if(value>99999){
            // 		value=value.toExponential(2);
            // 		value=(value+'').replace('+','').replace('e','E');
            // 	}
            // 	return value;
            // }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#f7f7f7",
              width: 0.01 * rem
            }
          },
          minInterval: 1
        },
        tooltip: {
          // trigger:'axis'
        },
        dataZoom: dataZoom,
        series: [
          {
            data: sdata,
            type: "bar",
            itemStyle: {
              color: "rgb(56,133,249)", //rgb(255,210,69)
              barBorderRadius: [0.1 * rem, 0.1 * rem, 0, 0]
            },
            label: {
              show: false,
              color: "#333333",
              fontWeight: "normal",
              position: "insideBottom",
              distance: 1.5 * rem,
              align: "left",
              verticalAlign: "middle",
              rotate: -90,
              formatter: "{b}",
              fontSize: 0.16 * rem
            },
            emphasis: {
              label: {
                show: false,
                color: "#333333",
                fontWeight: "bold"
              },
              itemStyle: {
                color: "rgb(255,210,69)",
                barBorderRadius: [0.1 * rem, 0.1 * rem, 0, 0]
              }
            },
            barMaxWidth: 0.42 * rem
          }
        ]
      };
      chart.clear();
      chart.setOption(option, true);
      this._reportChart = chart;
    },
    /**渠道分析 */
    loadQudaoChart(insdata) {
      var rem = window.rem;
      let chart = this._qudaoChart;
      if (!chart) {
        chart = window.$echarts.init(this.$refs.qudaoChart);
      }
      if (!insdata || insdata.length == 0) {
        this.reportData.fullChartNoData = true;
        return;
      }
      let xdata = [],
        sdata = [];
      let data = insdata;
      let unit = "个";
      for (let i = 0; i < data.length; i++) {
        let row = data[i];
        let xname = row["name"] || "";
        if (xname.length > 4) {
          xname = xname.substr(0, 4) + "...";
        }
        xdata.push(xname);
        sdata.push(row["value"]);
      }
      let option = {
        grid: {
          left: "4%",
          top: "12%",
          bottom: "4%",
          right: 0.26 * rem,
          containLabel: true
        },
        xAxis: {
          type: "category",
          z: 11,
          data: xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#999999"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // interval:0,
            fontSize: 0.14 * rem,
            color: "#333333",
            fontWeight: "normal",
            rotate: 30,
            inside: false,
            show: true
          }
        },
        yAxis: {
          type: "value",
          // name:"("+unit+")",
          nameTextStyle: {
            padding: [0, 0, 0, -0.4 * rem],
            color: "#666666",
            fontSize: 0.14 * rem
          },
          axisLabel: {
            color: "#666666",
            fontSize: 0.16 * rem,
            fontWeight: "normal"
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#f7f7f7",
              width: 0.01 * rem
            }
          },
          minInterval: 1
        },
        tooltip: {
          // trigger:'axis'
        },
        series: [
          {
            data: sdata,
            type: "bar",
            itemStyle: {
              color: "rgb(56,133,249)", //rgb(255,210,69)
              barBorderRadius: [0.1 * rem, 0.1 * rem, 0, 0]
            },
            label: {
              show: false,
              color: "#333333",
              fontWeight: "normal",
              position: "insideBottom",
              distance: 1.5 * rem,
              align: "left",
              verticalAlign: "middle",
              rotate: -90,
              formatter: "{b}",
              fontSize: 0.16 * rem
            },
            emphasis: {
              label: {
                show: false,
                color: "#333333",
                fontWeight: "bold"
              },
              itemStyle: {
                color: "rgb(255,210,69)",
                barBorderRadius: [0.1 * rem, 0.1 * rem, 0, 0]
              }
            },
            barMaxWidth: 0.42 * rem
          }
        ]
      };
      chart.setOption(option);
      this._qudaoChart = chart;
    },
    /**微官网分析 */
    loaWebSiteChart(insdata) {
      var rem = window.rem;
      let chart = this._websiteChart;
      if (!chart) {
        chart = window.$echarts.init(this.$refs.websiteChart);
      }

      if (!insdata || insdata.length == 0) {
        this.reportData.fullChartNoData = true;
        return;
      }
      let xdata = [],
        s1_data = [],
        s2_data = [],
        s3_data = [];
      let websiteData = insdata;
      websiteData.forEach(ele => {
        let timestr = ele.viewDate.split("-");
        xdata.push(timestr[1] + "月" + timestr[2] + "日");
        s1_data.push(ele.viewCount);
        s2_data.push(ele.visitorCount);
        s3_data.push(ele.clueCount);
      });
      var maxValue =
        websiteData.length == 0 ? 0 : Math.max.apply(null, websiteData);
      var len = maxValue.toString().length;
      let dataZoom = null;
      if (xdata.length > 4) {
        dataZoom = [
          {
            type: "slider",
            show: true,
            xAxisIndex: [0],
            top: 2.16 * rem,
            bottom: 0.07 * rem,
            left: 0.3 * rem,
            right: 0.3 * rem,
            startValue: 0,
            endValue: 3, //初始化滚动条
            minValueSpan: 3,
            maxValueSpan: 3,
            showDetail: false,
            showDataShadow: false,
            // backgroundColor : "red",
            fillerColor: "#9092984d",
            borderColor: "#DCDFE6",
            handleStyle: {
              opacity: 0
            }
          }
        ];
      }
      var option = {
        grid: {
          top: 0.25 * rem,
          right: 0.3 * rem,
          left: 0.3 * rem + len * 0.13 * rem,
          bottom: 0.4 * rem
        },
        legend: {
          show: true,
          left: "center",
          top: 0 * rem,
          itemWidth: 0.14 * rem,
          itemHeight: 0.14 * rem,
          borderRadius: 0
        },
        xAxis: {
          type: "category",
          data: xdata, //列名
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#999999"
            }
          },
          axisLabel: {
            color: "#666666",
            fontSize: 0.16 * rem,
            margin: 0.1 * rem,
            interval: 0
          },
          splitNumber: 2
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#666666",
            fontSize: 0.16 * rem,
            margin: 0.1 * rem
          },
          splitLine: {
            lineStyle: {
              color: "#f7f7f7"
            }
          },
          axisLine: {
            show: false
          },
          minInterval: 1
        },
        dataZoom: dataZoom,
        series: [
          {
            name: "访问次数",
            data: s1_data, //列值
            type: "bar",
            itemStyle: {
              color: "#46aeff",
              barBorderRadius: [0.06 * rem, 0.06 * rem, 0, 0]
            },
            barWidth: 0.2 * rem,
            barGap: "20%"
          },
          {
            name: "访问人数",
            data: s2_data, //列值
            type: "bar",
            itemStyle: {
              color: "#ff9946",
              barBorderRadius: [0.06 * rem, 0.06 * rem, 0, 0]
            },
            barWidth: 0.2 * rem
          },
          {
            name: "线索量",
            data: s3_data, //列值
            type: "bar",
            itemStyle: {
              color: "#67de47",
              barBorderRadius: [0.06 * rem, 0.06 * rem, 0, 0]
            },
            barWidth: 0.2 * rem
          }
        ]
      };
      chart.clear();
      chart.setOption(option, true);
      this._websiteChart = chart;
    },
    /**漏斗图 */
    loadLoudouChart(insdata) {
      var rem = window.rem;
      let chart = this._loudouChart;
      if (!chart) {
        chart = window.$echarts.init(this.$refs.loudouChart);
      }
      if (!insdata || insdata.length == 0) {
        this.reportData.fullChartNoData = true;
        return;
      }
      let markPoint = [];
      let starttop = 45 / insdata.length + 5,
        addtop = 90 / insdata.length;
      insdata.forEach((ele, index) => {
        let y = starttop + addtop * index;
        markPoint.push({
          x: "35%",
          y: y + "%",
          value: ele.value
        });
      });
      let option = {
        calculable: true,
        containLabel: true,
        color: ["#00e1ff", "#0097f0", "#ffe600", "#ff9322"],
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "5%",
            top: "5%",
            bottom: "5%",
            width: "60%",
            minSize: "30%",
            maxSize: "100%",
            sort: "none",
            gap: 0.02 * rem,
            label: {
              show: true,
              position: "outside",
              fontSize: 0.18 * rem,
              color: "#333333"
            },
            labelLine: {
              length: 0.5 * rem,
              lineStyle: {
                width: 0.02 * rem,
                type: "solid"
              }
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 0.01 * rem
            },
            markPoint: {
              symbol: "rect",
              itemStyle: {
                color: "rgba(0,0,0,0)"
              },
              label: {
                show: true,
                fontSize: 0.18 * rem,
                color: "#333333"
              },
              data: markPoint
            },
            data: insdata
          }
        ]
      };
      chart.clear();
      chart.setOption(option, true);
      this._loudouChart = chart;
    },
    // visibleChartBox(show) {
    //   if (show) {
    //     this.$refs.workTableChart.style.display = "block";
    //     this.$refs.workTableChartNodataLable.style.display = "none";
    //   } else {
    //     this.$refs.workTableChart.style.display = "none";
    //     this.$refs.workTableChartNodataLable.style.display = "flex";
    //   }
    // },
    /**切换时间 */
    workTableChangeTime(d) {
      //自定义时间选取
      // console.log(d)
      if (d === "自定义") {
        this.$refs.selfTime.focus();
        this.reportData.radio = this.reportData.pre_radio;
        return;
      }
      this.reportData.selfTime=[];
      let timeobj, preTimeObj;
      if (d == "今日") {
        timeobj = tool.getTimeObjByType(1);
        preTimeObj = tool.getTimeObjByType(31);
        console.log(preTimeObj);
        this.reportData.timeType = "昨日";
      } else if (d == "近7天") {
        timeobj = tool.getTimeObjByType(21);
        preTimeObj = tool.getTimeObjByType(32);
        // console.log(timeobj)
        this.reportData.timeType = "过去7天";
      } else if (d == "本月") {
        timeobj = tool.getTimeObjByType(3);
        preTimeObj = tool.getTimeObjByType(33);
        this.reportData.timeType = "上月";
      } else if (d == "一年") {
        timeobj = tool.getTimeObjByType(4);
        preTimeObj = tool.getTimeObjByType(34);
        this.reportData.timeType = "去年";
      }
      this.reportData.pre_radio = d;
      let type = this.reportData.workTableChangeType;
      this.reportData.fullChart_startTime = timeobj.startTime;
      this.reportData.fullChart_endTime = timeobj.endTime;
      this.reportData.preStartTime = preTimeObj.startTime;
      this.reportData.preEndTime = preTimeObj.endTime;
      this.updateMyReportDataByTimeAndType(
        timeobj.startTime,
        timeobj.endTime,
        type
      );
    },
    /**自定义时间确认选择后 */
    updateSelfTime(d) {
      // console.log(d);
      if (!d) return;
      this.reportData.radio = "自定义";
      this.reportData.timeType = "上一周期";
      this.reportData.pre_radio = "自定义";
      let start = formateDate(d[0]),
        end = formateDate(d[1]);
      this.reportData.fullChart_startTime = start;
      this.reportData.fullChart_endTime = end;
      let type = this.reportData.workTableChangeType;
      let num = formateDateForLast(start, end) + 1;
      let daytime = new Date(start);

      daytime.setDate(daytime.getDate() - num); //上个自定义第一天
      let month = formaterNum(daytime.getMonth() + 1);

      let day = formaterNum(daytime.getDate());
      this.reportData.preStartTime = getFormateTimeStr(
        daytime.getFullYear(),
        month,
        day,
        "00",
        "00",
        "00"
      );
      let daytime1 = new Date(start);
      daytime1.setDate(daytime1.getDate() - 1); //上个自定义最后一天
      console.log(daytime1.getDate());
      let month1 = formaterNum(daytime1.getMonth() + 1);
      let day1 = formaterNum(daytime1.getDate());
      this.reportData.preEndTime = getFormateTimeStr(
        daytime1.getFullYear(),
        month1,
        day1,
        "00",
        "00",
        "00"
      );
      console.log(this.reportData.preStartTime, this.reportData.preEndTime);
      this.updateMyReportDataByTimeAndType(start, end, type);

      function formateDateForLast(start, end) {
        start = new Date(start).getTime();
        end = new Date(end).getTime();
        let time = end - start;
        return Math.floor(time / 86400000);
      }

      function formaterNum(param) {
        return param < 10 ? "0" + param : param;
      }

      function getFormateTimeStr(year, month, day, hour, minute, second) {
        return (
          year +
          "-" +
          month +
          "-" +
          day +
          " " +
          hour +
          ":" +
          minute +
          ":" +
          second
        );
      }

      function formateDate(t = new Date()) {
        let year = t.getFullYear();
        let month = t.getMonth() + 1;
        month = month < 10 ? "0" + month : month;
        let day = t.getDate();
        day = day < 10 ? "0" + day : day;
        let hour = t.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        let minute = t.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        let second = t.getSeconds();
        second = second < 10 ? "0" + second : second;
        return (
          year +
          "-" +
          month +
          "-" +
          day +
          " " +
          hour +
          ":" +
          minute +
          ":" +
          second
        );
      }
    },
    /**切换类型 */
    workTableChangeType(d) {
      //console.log(d);
      this.reportData.workTableradio = d;
      this.reportData.workTableChangeType =d;
      if (d === 1 || d === 2) {
        this.reportData.totalIncomeTxt = "总收入";
      } else if (d === 7) {
        this.reportData.totalIncomeTxt = "总退费";
      } else {
        this.reportData.totalIncomeTxt = "总人数";
      }
      //微官网分析
      if (d === 10) {
        let radio = this.reportData.radio;
        if (radio == "一年" || radio == "自定义") {
          radio = "今日";
        }
        this.reportData.radio = radio;
        this.workTableChangeTime(radio);
        return;
      }

      this.updateMyReportDataByTimeAndType("", "", d, true);
    },

    /**
     * 初始化数据
     */
    initData() {
      this.bill_mode = JSON.parse(tool.getItem(window.lsKey.dict)).bill_mode;
      // debugger;
      //我的报表
      this.workTableChangeTime("今日");
      /**校区信息 */
      this.getCampusInfo();
      //初始化课表
      // let param = {campusId : vm.campusId}
      // api.getListOfCampus(param).then(function(data){

      //   setCampusTime(data.list);
      //   vm.$refs.syllabusCalendar.init();
      // })
    },
    /**
     * 获取校区信息
     */
    getCampusInfo() {
      let paras = {
        campusId: vm.campusId
      };
      api.campusInfo(paras).then(function(data) {
        console.log(data);
        if (data.resultCode == 2000) {
          data.campus.serveStartTime = data.campus.serveStartTime.split(" ")[0];
          data.campus.serveEndTime = data.campus.serveEndTime.split(" ")[0];
          vm.campusData = data.campus;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    campusChange: function(campusId) {
      //校区改变
      this.campusId = campusId;
      this.initData();
      this.$refs.syllabusCalendar.campusChange(campusId);
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    
    let campusId = this.$store.state.campusId;
    if(this.$route.query.campusId){
      campusId = tool.decode(this.$route.query.campusId);
    }
    vm.campusId = campusId;
    this.initData();
    vm.$refs.syllabusCalendar.campusChange(campusId);
  },
  beforeDestroy(){
  }
};
</script>

<style lang="scss">
#campus_details {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-breadcrumb__separator {
    color: #999999;
  }
  .el-breadcrumb__inner.is-link {
    font-weight: 400;
    color: #141414;
  }
  .el-breadcrumb__inner.is-link:hover {
    color: #3885f8;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #999999;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-width: 15.9609rem;
    width: 15.9609rem;
    margin: 0 auto;
    .timeselect {
      position: absolute;
      right: 0.26rem;
      top: -0.05rem;
      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        color: #3885f8;
        font-weight: bold;
        background: #ffffff;
        border: 0.01rem solid #dcdfe6;
        -webkit-box-shadow: 0rem 0 0 0 #ffffff;
        box-shadow: 0rem 0 0 0 #ffffff;
      }
    }
    // 我的报表
    .myWorkTable {
      margin-top: 0.2rem;
      width: 9.775rem;
      height: 4rem;
      background: #fff;
      border: 0.01rem solid #ededed;
      border-radius: 0.1rem;
      box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
      overflow: hidden;
      .el-date-editor {
        position: absolute;
        right: 0.2rem;
        top: 0.05rem;
        width: 0.69rem;
        height: 0.27rem;
        opacity: 0;
        pointer-events: none;
      }
      .tbody {
        display: block;
        height: 3rem;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch; // 为了滚动顺畅
      }
      /*滚动条*/
      .tbody::-webkit-scrollbar {
        display: none; // 隐藏滚动条
      }
      .thead,
      .tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
      }
      .tbody td {
        height: 0.5rem;
      }
      .thead {
        width: calc(100% - 1em);
      }
      .title_campus {
        background-color: #f5f7fa;
        padding: 0 0.32rem 0 0.32rem;
        border-radius: 0.1rem 0.1rem 0 0;
        line-height: 0.45rem;
        font-size: 0.14rem;
      }
      .title {
        background-color: #f5f7fa;
        padding: 0 0.32rem 0 0.32rem;
        border-radius: 0.1rem 0.1rem 0 0;
        line-height: 0.45rem;
        font-size: 0.14rem;
        color: #666666;
      }
      .info_left {
        float: left;
        width: 50%;
        padding: 0.3rem 0.6rem;
        font-size: 0.2rem;
        color: #999999;
      }
      .info_right {
        float: left;
        width: 50%;
        padding: 0.3rem 0.4rem 0.3rem 0rem;
        font-size: 0.2rem;
        color: #999999;
      }
      .radioBtn {
        width: 100%;
        margin-top: 0.05rem;
        margin-left: 0.2rem;
        .el-radio-button__inner {
          width: 1rem;
          border-top: 0;
          border-bottom: 0;
          height: 0.5rem;
          line-height: 0.25rem;
          font-size: 0.18rem;
          padding: 0.12rem 0.1rem;
        }
        .first .el-radio-button__inner {
          border-left: 0;
        }
        .last .el-radio-button__inner {
          border-right: 0;
        }
        .moreTxt .el-radio-button__inner {
          width: 1.1rem;
        }
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          border-radius: 0.04rem;
        }
      }

      .box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 0.15rem;
        height: 3rem;

        .left {
          width: 25%;
          height: 100%;
          .leftbox1 {
            width: 95%;
            height: 50%;
            margin-left: 5%;
            // border-bottom: 0.01rem solid #c9c9c9;
            .txt1 {
              margin-top: 0.2rem;
              padding-left: 0.3rem;
              font-size: 0.18rem;
              color: #3885f8;
              font-weight: 600;
            }
            .txt2 {
              margin-top: 0.2rem;
              text-align: left;
              color: #3885f8;
              padding-left: 0.37rem;
              .num {
                font-size: 0.36rem;
              }
              .unit {
                font-size: 0.16rem;
              }
            }
            .txt3 {
              margin-top: 0.05rem;
              font-size: 0.18rem;
              text-align: left;
              padding-left: 0.37rem;
            }
          }
          .splitline {
            width: 1.78rem;
            left: 0.28rem;
            height: 0.01rem;
            border: 0.01rem solid #ebebeb;
            position: relative;
            top: -0.1rem;
          }
          .leftbox2 {
            width: 95%;
            height: 50%;
            margin-left: 5%;
            margin-top: -0.15rem;
            .txt1 {
              margin-top: 0.2rem;
              font-size: 0.36rem;
              text-align: left;
              color: #ff5252;
              padding-left: 0.37rem;
              .unit {
                font-size: 0.2rem;
              }
              .arrow {
                font-size: 0.25rem;
              }
            }
            .txt2 {
              font-size: 0.18rem;
              color: #333333;
              text-align: left;
              padding-left: 0.37rem;
              margin-top: 0.05rem;
            }
          }
        }
        .chartbox {
          width: 75%;
          height: 100%;
          // width: 7.31rem;
          // height: 3rem;
        }
        .chartboxNodataLable {
          width: 75%;
          height: 100%;
          font-size: 0.16rem;
          color: #666666;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: -0.2rem;
        }
        .box-fullChart {
          width: 100%;
          height: 100%;
          font-size: 0.16rem;
          color: #666666;
          .txt {
            padding-left: 0.4rem;
            margin-top: 0.16rem;
            color: #3885f8;
            font-weight: bold;
            display: block;
          }
          .chart_loudou,
          .chart_qudao,
          .chart_website,
          .chartNodata {
            width: 100%;
            height: 2.4rem;
            padding-top: 0.1rem;
          }
          .chart_loudou {
            width: 45%;
            margin: 0 auto;
          }
          .chartNodata {
            display: none;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .box-worktableMain {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 0.02rem;
        height: 3rem;
        .box-radioBtn {
          position: relative;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          height: 0.65rem;
          font-size: 0.18rem;
          color: #333333;
          padding: 0 0.2rem;
          .radioItem {
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            width: 1.55rem;
            height: 0.3rem;
            border-radius: 0;
            border-right: 0.01rem solid #dcdfe6;
          }
          .radioItem:hover {
            cursor: pointer;
            color: #3885f8;
          }
          .radioItem.first {
          }
          .radioItem.last {
            border-right: 0;
          }
          .radioItem.row2 {
            margin-top: 0.05rem;
          }
          .radioItem[select="true"] {
            color: #ffffff;
            background-color: #3885f8;
            border-color: #3885f8;
            border-radius: 0.04rem;
            // -webkit-box-shadow: -0.01rem 0 0 0 #3885f8;
            // box-shadow: -0.01rem 0 0 0 #3885f8;
          }
        }
        .box-chartWTB {
          width: 100%;
          height: 2.8rem;
          padding: 0 0.2rem;
          display: flex;
          .left {
            width: 25%;
            height: 100%;
            .leftbox1 {
              width: 100%;
              height: 50%;
              .txt1 {
                margin-top: 0.15rem;
                padding-left: 0.1rem;
                font-size: 0.18rem;
                color: #3885f8;
                font-weight: 600;
              }
              .txt2 {
                margin-top: 0.2rem;
                text-align: left;
                color: #3885f8;
                padding-left: 0.2rem;
                white-space: nowrap;
                .num {
                  font-size: 0.36rem;
                }
                .unit {
                  font-size: 0.16rem;
                }
              }
              .txt3 {
                margin-top: 0.05rem;
                font-size: 0.18rem;
                text-align: left;
                padding-left: 0.2rem;
              }
            }
            .splitline {
              width: 1.78rem;
              left: 0.2rem;
              height: 0.01rem;
              border: 0.01rem solid #ebebeb;
              position: relative;
              // top: -0.06rem;
            }
            .leftbox2 {
              width: 100%;
              // margin-top: -0.150rem;
              .txt1 {
                margin-top: 0.2rem;
                font-size: 0.36rem;
                text-align: left;
                color: #ff5252;
                padding-left: 0.2rem;
                white-space: nowrap;
                .unit {
                  font-size: 0.2rem;
                }
                .arrow {
                  font-size: 0.25rem;
                }
              }
              .txt2 {
                font-size: 0.18rem;
                color: #333333;
                text-align: left;
                padding-left: 0.2rem;
                margin-top: 0.05rem;
              }
            }
          }
          .chartbox {
            width: 75%;
            height: 98%;
          }
          .chartboxNodataLable {
            width: 75%;
            height: 100%;
            font-size: 0.16rem;
            color: #666666;
            display: flex;
            justify-content: center;
            align-items: center;
            // margin-top: -0.2rem;
          }
          .box-fullChart {
            width: 100%;
            height: 98%;
            font-size: 0.16rem;
            color: #666666;
            .txt {
              padding-left: 0.4rem;
              margin-top: 0.16rem;
              color: #3885f8;
              font-weight: bold;
              display: block;
            }
            .chart_loudou,
            .chart_qudao,
            .chart_website,
            .chartNodata {
              width: 100%;
              height: 2.4rem;
              padding-top: 0.1rem;
            }
            .chart_loudou {
              width: 45%;
              margin: 0 auto;
            }
            .chartNodata {
              // display: none;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
    // 课程表
    .classTableBox {
      margin-left: 0;
      margin-top: 0.14rem;
      width: 100%;
      height: auto;
      background: #fff;
      border: 0.01rem solid #ededed;
      border-radius: 0.1rem;
      box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
      .cell {
        font-size: 0.14rem;
      }
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>